<template>
    <div class="toast">
        <!--<i class="iconfont icon-toast-jinggao"></i>
        <span>提示内容</span> -->
        <i  :class="toastType=='success' ? 'iconfont icon-toast_chenggong' :  (toastType=='danger' ? 'iconfont icon-toast-shibai_huaban' : 'iconfont icon-toast-jinggao')"
        ></i>
        <span>{{toastMsg}}</span>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'',
    components: {

    },
    props: {

    },
    data() {
        return {

        };
    },
    computed: {
        ...mapState({
            toastMsg: state=>state.toastStatus.toastMsg,
            toastType: state=>state.toastStatus.toastType
        })
    },
    created() {

    },
    mounted() {

    },
    methods: {

    },
    watch: {

    },
};
</script>

<style scoped lang="less">
    .toast{
        position: fixed;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        background-color: #fff;
        box-shadow: 0 0 10px #000;
        border-radius: 6px;
        z-index: 999;
        .iconfont{
            margin-right: 5px;
        }
        .icon-toast-shibai_huaban{
            color: red;
        }
        .icon-toast-jinggao{
            color: orange;
        }
        .icon-toast_chenggong{
            color: green;
        }
    }
</style>
